$primary-color: #007bff;
$secondary-color: #6c757d;
$white: #fff;
$gray-200: #e9ecef;
$border-radius: 7px;
// 登录按钮样式
.login{
    background-color:$primary-color;
    color:$white;
    position: absolute;
    margin-left: 15%;
    padding: 10px 20px;
    border: none;
    border-radius:$border-radius;
    cursor: pointer;
    font-size: 16px;
    width: auto; 
    height: auto;
    line-height: normal;
    
}
// 顶部查询区域样式
.top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    margin-top:3%;
    div {
        margin-right: 10px;
        input[type="text"] {
            width: 150px;
            padding: 8px;
            border: 1px solid $gray-200;
            border-radius: $border-radius;
        }
    }
    #query-button,#reset{
        background-color: $primary-color;
        color: $white;
        padding: 8px 16px;
        border: none;
        border-radius: $border-radius;
        cursor: pointer;
        font-size: 14px;
    }
}
// 表格样式
#all {
    table {
        width: 100%;
        border-collapse: collapse;
        thead {
           tr {
               th {
                    background-color: $gray-200;
                    padding: 10px;
                    text-align: left;
                    font-weight: bold;
                    width:auto;
                    &:last-child{
                        width:50px;
                    }
                }
            }
            input[type="button"] {
                         border: none; // 去除边框
                         color:blue;
                         font-size: 18px;
                         background: none; // 可选：如果想要移除背景颜色
                         padding: 0; // 可选：根据需要调整内边距
                         cursor: pointer; // 改变鼠标指针为手型，增强交互体验
            }
        }
        tbody {
            tr {
                td {
                    padding: 10px;
                    border-top: 1px solid $gray-200;
                }
            }
        }
        .data {
        //这里的 & 符号表示当前上下文的选择器（即 .data），所以 &:hover 实际上会编译成 .data:hover。
              height:10%;
              &:hover{
                    background-color:rgba(128, 128, 128, 0.1);
              }
              td,th{
                border-bottom:1px solid grey;
              }
            input[type="button"], .delete{
                        border: none; // 去除边框
                        color:blue;
                        font-size: 18px;
                        background: none; // 可选：如果想要移除背景颜色
                        padding: 0; // 可选：根据需要调整内边距
                        cursor: pointer; // 改变鼠标指针为手型，增强交互体验
                        outline: none; // 移除点击时的默认聚焦边框（可选）
            }
        }
    }
}
// 添加按钮样式
#add {
    background-color: $primary-color;
    color: $white;
    padding: 8px 16px;
    border: none;
    border-radius: $border-radius;
    cursor: pointer;
    font-size: 14px;
}
#fill,#revise-fill{
    width:100%;
    height:100%;
    background-color:#000;
    position:absolute;
    top:0px;
    left:0px;
    opacity:0.3;
    z-index:100;
    display:none;
}
#myform,#revise{
    width:100%;
    height:100%;
    position:absolute;
    border-radius: $border-radius;
    top:0px;
    left:0px;
    z-index:101;
    display:none;
    table{
        height:200px;
        width:400px;
        border-radius: 2%;;
        margin:20% auto;
        background-color:#fff;
        td{
            width:150px;
            &:first-child{
                padding-left: 25px;
                padding-top: 6px;
            } 
            &:last-child{
                padding-right:52px;
            }
        }
        .xiaotianjia .confirm{
            td {
                text-align: center;
            }
        }
    }    
}
// 定义分页按钮的样式
@mixin pagination-button {
    display: inline-block;
    padding: 0.5em 1em;
    margin: 0 0.25em;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #f8f9fa; 
    color: #007bff; 
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
  
    &:hover {
      background-color: #e9ecef; 
      border-color: #b8daff;
    }
    &:active {
      background-color: #d1ecf1; 
      border-color: #b8daff;
    }
  }
  // 分页按钮容器样式
  #page {
    display: flex;
    justify-content: center; 
    margin-top: 1em;
    #preBtn,#nextBtn {
      @include pagination-button;
    }
  }
